<template>
  <div class="content">
    <div class="node">
      <div class="nodetitle">{{ $t('節點') }}</div>
      <div class="nodebac">
        <div class="nodecontent">
          <span style="color: #939ba5">{{ $t('節點總數') }}</span>
          <span class="sp" style="color: #f2ce3d">0</span>
        </div>
        <div class="nodediv">
          <div class="nodedivitem">
            <span class="num">0</span>
            <span class="dian">{{ $t('創世節點') }}</span>
          </div>
          <div class="nodedivitem">
            <span class="num">0</span>
            <span class="dian">{{ $t('超級節點') }}</span>
          </div>
        </div>
      </div>
      <div class="zsl">
        <div class="zslitem">
          <div class="left">{{ $t('總算力') }}</div>
          <div class="right">*</div>
        </div>
        <div class="zslitem">
          <div class="left">{{ $t('總獎勵') }}</div>
          <div class="right">*</div>
        </div>
        <div class="zslitem">
          <div class="left">{{ $t('交易費分潤') }}</div>
          <div class="right">*</div>
        </div>
        <div class="link"></div>
        <div class="zslitem">
          <div class="left">{{ $t('節點') }}</div>
          <div class="right" style="color: #f2ce3d">{{ $t('超級節點') }}</div>
        </div>
        <div class="zslitem">
          <div class="left">{{ $t('算力') }}</div>
          <div class="right">*</div>
        </div>
        <div class="zslitem">
          <div class="left">{{ $t('獎勵') }}</div>
          <div class="right">*</div>
        </div>
        <div class="zslitem">
          <div class="left">{{ $t('我的交易費分潤') }}</div>
          <div class="right">*</div>
        </div>
      </div>
      <div class="jd">
        <div class="jditem">
          <div class="left">{{ $t('節點') }}</div>
          <div class="right">0 BTB</div>
        </div>
        <div class="jditem">
          <div class="left">{{ $t('已解鎖') }}</div>
          <div class="right">0 BTB</div>
        </div>
        <div class="jditem">
          <div class="left">{{ $t('待解鎖') }}</div>
          <div class="right">0 BTB</div>
        </div>
        <div class="btn">Open</div>
      </div>
    </div>
    <div class="pools">
      <div class="poolstitle">Pools</div>
      <div class="btb">
        <div class="btbimg">
          <img src="@/assets/tab/logo.png" alt="" />
          <span>BTB</span>
        </div>
        <div class="btbitem">
          <div class="left">BTB {{ $t('質押') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('昨日最佳持幣區') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('今日結算倒數計時') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('今日產出') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('累計產出') }}</div>
          <div class="right">*</div>
        </div>
        <div class="hx">
          <van-circle :stroke-width="100" v-model:current-rate="currentRate" color="#324040" :rate="currentRate"
            :speed="100" text="text" />
        </div>
      </div>
      <div class="my">
        <div class="myitem">
          <div class="left">{{ $t('我的質押') }}</div>
          <div class="right">*</div>
        </div>
        <div class="myitem">
          <div class="left">{{ $t('我的收益') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btn">Open</div>
      </div>
    </div>
    <div class="pools">
      <div class="poolstitle">{{ $t('總覽') }}</div>
      <div class="btb">
        <div class="btbitem">
          <div class="left">{{ $t('管理中的資產') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">BLP {{ $t('池') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('24小時數量') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('開啟利息') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('開倉做多') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('做空倉位') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('費用來自') }}</div>
          <div class="right">*</div>
        </div>
      </div>
    </div>
    <div class="pools">
      <div class="poolstitle">{{ $t('總統計表') }}</div>
      <div class="btb">
        <div class="btbitem">
          <div class="left">{{ $t('費用總額') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('總量') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('使用者總數') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('底價金額') }}</div>
          <div class="right">*</div>
        </div>
      </div>
    </div>
    <div class="pools">
      <div class="poolstitle">{{ $t('代幣') }}</div>
      <div class="btb">
        <div class="btbimg">
          <img src="@/assets/tab/logo.png" alt="" />
          <span>BTB</span>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('價錢') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('供應') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('質押總額') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('標記上限') }}</div>
          <div class="right">*</div>
        </div>
        <div class="hx">
          <van-circle :stroke-width="100" v-model:current-rate="currentRate" color="#324040" :rate="currentRate"
            :speed="100" text="text" />
        </div>
      </div>
      <div class="btb">
        <div class="btbimg">
          <img src="@/assets/tab/logo.png" alt="" />
          <span>BLP</span>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('價錢') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('供應') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('質押總額') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('標記上限') }}</div>
          <div class="right">*</div>
        </div>
        <div class="btbitem">
          <div class="left">{{ $t('穩定幣百分比') }}</div>
          <div class="right">*</div>
        </div>
        <div class="hx">
          <van-circle :stroke-width="100" v-model:current-rate="currentRate" color="#324040" :rate="currentRate"
            :speed="100" text="text" />
        </div>
      </div>
      <div style="width: 100%; height: 14px"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";

const currentRate = ref(90);
computed(() => currentRate.value.toFixed(0) + "%");
</script>

<style lang="scss" scoped>
.content {
  padding: 44px 15px 0 15px;
  background-color: #17171a;
  font-size: 20px;
  color: #fff;
}

.node {
  margin-bottom: 20px;

  .nodetitle {
    font-size: 22px;
    margin-top: 24px;
    margin-bottom: 14px;
  }

  .nodebac {
    width: 100%;
    height: 131px;
    padding: 15px;
    box-sizing: border-box;
    background: url(../assets/chat/node.png) no-repeat;
    border-radius: 8px;
    margin-bottom: 20px;

    .nodecontent {
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;

      .sp {
        font-size: 18px;
      }
    }

    .nodediv {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 68px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(255, 255, 255, 0.08);
      border-radius: 5px;
      padding: 12px 40px;
      box-sizing: border-box;

      .nodedivitem {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        color: #959da0;

        .num {
          font-size: 18px;
          color: #eeefef;
        }

        .dian {
          font-size: 12px;
        }
      }
    }
  }

  .zsl {
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: #2e323b;
    color: #959da0;
    border-radius: 5px;
    margin-bottom: 20px;

    .zslitem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding: 5px 0;

      .right {
        color: #fff;
      }
    }

    .link {
      width: 100%;
      border: 1px solid rgb(50, 64, 64);
      background-color: rgb(50, 64, 64);
      margin: 10px 0;
    }
  }

  .jd {
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: #2e323b;
    color: #959da0;
    border-radius: 5px;
    margin-bottom: 20px;

    .jditem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding: 5px 0;

      .right {
        color: #fff;
      }
    }

    .btn {
      width: 100%;
      height: 43px;
      background-color: #f2ce3d;
      border-radius: 5px;
      margin: 10px 0;
      color: #000;
      text-align: center;
      line-height: 43px;
      font-size: 16px;
    }
  }
}

.pools {
  .poolstitle {
    margin-bottom: 14px;
  }

  .hx {
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .btb {
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: #2e323b;
    color: #959da0;
    border-radius: 5px;
    margin-bottom: 20px;

    .btbimg {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #fff;
      margin-bottom: 10px;

      img {
        width: 24px;
        height: 24px;
      }

      span {
        margin-left: 10px;
      }
    }

    .btbitem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding: 5px 0;

      .right {
        color: #fff;
      }
    }
  }

  .my {
    padding: 10px 15px;
    box-sizing: border-box;
    background-color: #2e323b;
    color: #959da0;
    border-radius: 5px;
    margin-bottom: 20px;

    .myitem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      padding: 5px 0;

      .right {
        color: #fff;
      }
    }

    .btn {
      width: 100%;
      height: 43px;
      background-color: #f2ce3d;
      border-radius: 5px;
      margin: 10px 0;
      color: #000;
      text-align: center;
      line-height: 43px;
      font-size: 16px;
    }
  }
}
</style>
